<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 950px;
            border: 1px solid gray;
            padding: 20px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: space-around;
            
        }
        .container .item{
            margin: 10px;
            width: 140px;
            /* border: 1px solid orangered; */
            overflow: hidden;
            position: relative;
            /* box-sizing: border-box; */
            
        }
        .item img{
            width: 100%;
            border: 1px solid gainsboro;
            
        }
        .abb{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .play{
            padding: 5px;
            position: absolute;
            top: 115px;
          
            width:100%;
           
            background: rgba(0,0,0,.4);
            color: #cccccc;
            font-size: 13px;
           
            
        }
        .actor{
            font-size: 12px;
           color: #999999; 
        }
        .actor .color{
            color: #666666;
        }
    </style>
</head>
<body>
    <div class="container">
       
    </div>
    <script>
        // 1、将远程数据获取过来
        var url = "http://47.108.197.28:3000/top/playlist?limit=30";
        $.ajax({
            url,
            success:res=>{
                var playlists = res.playlists;
                console.log(playlists)
                for(var i =0;i<playlists.length;i++){
                    var {name,coverImgUrl,creator,playCount}=playlists[i];
                    var play = Math.floor(playlists[i].playCount/10000)+"万";
                    console.log(play)
                    var temple = 
                        `
                        <div class = "item">
                            
                            <img src = "${coverImgUrl}"> 
                            <p class = "abb">${name}</p>
                            <span class = "play">${play}</span>
                            <p class = "actor">by &nbsp;
                                <span class = "color">${creator.nickname}</span>
                            </p>
                        </div>
                        
                        `
                        console.log(temple)
                        $(".container").prepend(temple)
                }
            }
        })
    </script>
</body>
</html>